<template>
    <div>
        <el-container>
            <el-header>
                <div class="clearFix">
                    <div class="fl hd-title">
                        hello,欢迎来到墨鱼后台管理系统!
                    </div>
                    <div class="fr user-info clearFix">
                        <div class="pic fl">
                            <img :src="user_info.avatar">
                        </div>
                        <p class="fl nickName">HI! {{user_info.nickName}}</p>
                    </div>
                </div>
                <!-- <el-row>
                            <el-col :span="4">
                                <div class="grid-content bg-purple hd-title">
                                     
                                </div>
                            </el-col>
                            <el-col :span="20"><div class="grid-content bg-purple-light"></div></el-col>
                        </el-row> -->
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu :router="isRouter" :unique-opened="isUnique" default-active="1" class="el-menu-vertical-demo" @open="handleOpen" background-color="#545c64" @close="handleClose" text-color="#fff" active-text-color="#ffd04b">
                       
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>导航一</span>
                            </template>
                            <el-menu-item-group>
                                <template slot="title">
                                    分组一
                                </template>
                                <el-menu-item index="1-1" @click="tt">
                                    选项1
                                </el-menu-item>
                                <el-menu-item index="1-2">
                                    选项2
                                </el-menu-item>
                                <el-menu-item index="1-3">
                                    选项3
                                </el-menu-item>
                                <el-menu-item index="1-4">
                                    选项4
                                </el-menu-item>

                            </el-menu-item-group>
                             <el-menu-item-group>
                                    <template slot="title">
                                        分组二
                                    </template>
                                    <el-menu-item index="1-5">
                                        选型5
                                    </el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="1-6">
                                    <template slot="title">
                                        选项6
                                    </template>
                                    <el-menu-item-group> 
                                        <el-menu-item index="6-1">
                                            选项6-1
                                        </el-menu-item>
                                        <el-menu-item index="6-2">
                                            选项6-2
                                        </el-menu-item>
                                        <el-menu-item index="6-3">
                                            选项6-3
                                        </el-menu-item>
                                    </el-menu-item-group>
                            </el-submenu>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>导航二</span>
                            </template>
                            <el-menu-item-group>
                                <template slot="title">
                                    分组一
                                </template>
                                <el-menu-item index="2-1">
                                    选项1
                                </el-menu-item>
                                <el-menu-item index="2-2">
                                    选项2
                                </el-menu-item>
                                <el-menu-item index="2-3">
                                    选项3
                                </el-menu-item>
                                <el-menu-item index="2-4">
                                    选项4
                                </el-menu-item>

                            </el-menu-item-group>
                             <el-menu-item-group>
                                    <template slot="title">
                                        分组二
                                    </template>
                                    <el-menu-item index="2-5">
                                        选型5
                                    </el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="1-7">
                                    <template slot="title">
                                        选项6
                                    </template>
                                    <el-menu-item-group> 
                                        <el-menu-item index="2-1">
                                            选项6-1
                                        </el-menu-item>
                                        <el-menu-item index="2-2">
                                            选项6-2
                                        </el-menu-item>
                                        <el-menu-item index="2-3">
                                            选项6-3
                                        </el-menu-item>
                                    </el-menu-item-group>
                            </el-submenu>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>导航三</span>
                            </template>
                            <el-menu-item-group>
                                <template slot="title">
                                    分组一
                                </template>
                                <el-menu-item index="3-1">
                                    选项1
                                </el-menu-item>
                                <el-menu-item index="3-2">
                                    选项2
                                </el-menu-item>
                                <el-menu-item index="3-3">
                                    选项3
                                </el-menu-item>
                                <el-menu-item index="3-4">
                                    选项4
                                </el-menu-item>

                            </el-menu-item-group>
                             <el-menu-item-group>
                                    <template slot="title">
                                        分组二
                                    </template>
                                    <el-menu-item index="3-5">
                                        选型5
                                    </el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="1-8">
                                    <template slot="title">
                                        选项6
                                    </template>
                                    <el-menu-item-group> 
                                        <el-menu-item index="3-1">
                                            选项6-1
                                        </el-menu-item>
                                        <el-menu-item index="3-2">
                                            选项6-2
                                        </el-menu-item>
                                        <el-menu-item index="3-3">
                                            选项6-3
                                        </el-menu-item>
                                    </el-menu-item-group>
                            </el-submenu>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>导航四</span>
                            </template>
                            <el-menu-item-group>
                                <template slot="title">
                                    分组一
                                </template>
                                <el-menu-item index="4-1">
                                    选项1
                                </el-menu-item>
                                <el-menu-item index="4-2">
                                    选项2
                                </el-menu-item>
                                <el-menu-item index="4-3">
                                    选项3
                                </el-menu-item>
                                <el-menu-item index="4-4">
                                    选项4
                                </el-menu-item>

                            </el-menu-item-group>
                             <el-menu-item-group>
                                    <template slot="title">
                                        分组二
                                    </template>
                                    <el-menu-item index="4-5">
                                        选型5
                                    </el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="1-9">
                                    <template slot="title">
                                        选项6
                                    </template>
                                    <el-menu-item-group> 
                                        <el-menu-item index="4-1">
                                            选项6-1
                                        </el-menu-item>
                                        <el-menu-item index="4-2">
                                            选项6-2
                                        </el-menu-item>
                                        <el-menu-item index="4-3">
                                            选项6-3
                                        </el-menu-item>
                                    </el-menu-item-group>
                            </el-submenu>
                        </el-submenu>
                        <el-submenu index="5">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>导航五</span>
                            </template>
                            <el-menu-item-group>
                                <template slot="title">
                                    分组一
                                </template>
                                <el-menu-item index="5-1">
                                    选项1
                                </el-menu-item>
                                <el-menu-item index="5-2">
                                    选项2
                                </el-menu-item>
                                <el-menu-item index="5-3">
                                    选项3
                                </el-menu-item>
                                <el-menu-item index="5-4">
                                    选项4
                                </el-menu-item>

                            </el-menu-item-group>
                             <el-menu-item-group>
                                    <template slot="title">
                                        分组二
                                    </template>
                                    <el-menu-item index="5-5">
                                        选型5
                                    </el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="1-10">
                                    <template slot="title">
                                        选项6
                                    </template>
                                    <el-menu-item-group> 
                                        <el-menu-item index="5-1">
                                            选项6-1
                                        </el-menu-item>
                                        <el-menu-item index="5-2">
                                            选项6-2
                                        </el-menu-item>
                                        <el-menu-item index="5-3">
                                            选项6-3
                                        </el-menu-item>
                                    </el-menu-item-group>
                            </el-submenu>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-container>
                    <el-main>
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-container>
            <el-footer>
                        徐州再出发网络科技有限公司CopyRight©2014-2018 版权所有
            </el-footer>
        </el-container>
    </div>
</template>

<script>
export default {
  data() {
    return {
      user_info: {
        avatar: "../../../static/img/yonghu.png",
        nickName: "最帅的人"
      },
      isUnique:true,
      cureentSubmeun:null,
      isRouter:false
    }
  },
  methods: {
      handleOpen(key,keyPath){
          console.log(key,keyPath)
          this.cureentSubmeun = key
          console.log(this.cureentSubmeun)
      },
      handleClose(key,keyPath){
          console.log(key,keyPath)
      },
      tt(){
          this.cureentSubmeun?close(this.cureentSubmeun):""  
      }
  }
};
</script>

<style lang="less" rel="stylesheet/less">
html {
  height: 100%;
  body {
    height: 100%;
    min-width: 980px;
    #app {
      height: 100%;
      div {
        height: 100%;
        .el-container {
          height: 100%;
          .el-header {
            background-color: #b3c0d1;
            color: #333;
            text-align: center;
            line-height: 60px;
            .hd-title {
              color: black;
              font-size: 20px;
              font-family: "楷体", "Helvetica Neue", Helvetica, "PingFang SC",
                "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial,
                sans-serif;
            }
            .user-info {
              .pic {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                overflow: hidden;
                margin-top: 15px;
                img {
                  display: block;
                  width: 100%;
                  height: 100%;
                }
              }
              p.nickName {
                line-height: 60px;
                margin-left: 10px;
              }
            }
          }
          .el-footer {
                background-color: #b3c0d1;
                color: #333;
                text-align: center;
                line-height: 60px;
          }
          .el-container {
            height: calc(100% - 60px);
            .el-aside {
              background-color: #545c64;
              color: #333;
              text-align: left;
              line-height: 200px;
              height: 100%;
            }
            .el-container {
              height: 100%;
              .el-main {
                background-color: #e9eef3;
                color: #333;
                text-align: center;
                line-height: 160px;
              }
             
            }
          }
        }
      }
    }
  }
}
</style>